<template>
	<view class="page__bd">
		<view class="hb-bar ">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>
				基础用法
			</view>
		</view>
		<view class="">
			<hb-notice-bar wrapable text="[单行] 生命中曾经有过的所有灿烂，原来终究，都需要用寂寞来偿还。" />
			<view class="margin-top">
				<hb-notice-bar text="[多行] 无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。" />
			</view>
		</view>

		<view class="hb-bar">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>
				加图标
			</view>
		</view>
		<view class="">
			<hb-notice-bar wrapable :scrollable="true" :leftIcon="true" text="生命中曾经有过的所有灿烂，原来终究，都需要用寂寞来偿还。" />
			<view class="margin-top">
				<hb-notice-bar :leftIcon="true" text="生命从来不曾离开过孤独而独立存在。无论是我们出生、我们成长、我们相爱还是我们成功失败，直到最后的最后，孤独犹如影子一样存在于生命一隅。所有人都显得很寂寞，用自己的方式想尽办法排遣寂寞，事实上仍是延续自己的寂寞。寂寞是造化对群居者的诅咒，孤独才是寂寞的唯一出口。" />
			</view>
		</view>

		<view class="hb-bar">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>
				使用左右插槽
			</view>
		</view>
		<view class="">
			<hb-notice-bar wrapable text="人为了达到正义的目的，尤其是当遭遇的对手比较没有底线的时候，不得不做出一两件看起来不太高尚的事情。">
				<text slot="left-icon">[公告]</text>
				<text slot="right-icon">[结束]</text>
			</hb-notice-bar>
		</view>

		<view class="hb-bar">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>
				通告栏模式
			</view>
		</view>
		<view class="">
			<hb-notice-bar mode="closeable" wrapable :scrollable="true" :leftIcon="true" text="跟魔鬼打交道，总要有点魔鬼的手段" />
			<view class="margin-top">
				<hb-notice-bar mode="link" wrapable :scrollable="true" text="生命中曾经有过的所有灿烂，原来终究，都需要用寂寞来偿还。" />
			</view>
		</view>
		<view class="hb-bar">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>
				自定义滚动速率
			</view>
		</view>
		<view class="bg-white">
			<hb-notice-bar wrapable :scrollable="true" :speed="100" :leftIcon="true" text="为众人抱薪者，不可使其冻毙于风雪 " />
		</view>

		<view class="hb-bar">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>
				自定义样式
			</view>
		</view>
		<view class="">
			<hb-notice-bar wrapable :scrollable="true" :color="diyColor" :backgroundColor="diyBgColor" :leftIcon="true" text="很久以前，那是很久以前，非常久" />
		</view>
	</view>
</template>

<script>
	import hbNoticeBar from '@/components/hb-notice-bar/index';
	export default {
		components: {
			hbNoticeBar
		},
		data() {
			return {
				diyColor: 'rgb(25, 137, 250)',
				diyBgColor: 'rgb(236, 249, 255)'
			}
		}
	}
</script>

<style>
</style>
